<template>
    <div class="p-4 bg-white rounded-lg space-y-3 text-gray-600">
        <div class="flex items-center justify-between">
            <div>商品金额</div>
            <div>¥399.00</div>
        </div>
        <div class="flex items-center justify-between">
            <div>运费</div>
            <div>¥0.00</div>
        </div>
        <div class="flex items-center justify-between" v-for="(item, index) in detail">
            <div>{{ item.name }}</div>
            <div class="text-red-500">{{ item.value }}</div>
        </div>
        <div class="flex items-center justify-end border-t pt-4">
            <div>
                <span>合计：</span>
                <span class="text-red-500">¥399.00</span>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
const detail = [
     {
        name: '立减',
        value: '-¥30'
    }, {
        name: '优惠券',
        value: '-¥30'
    }
]
</script>
    
<style></style>